---
import ItemContent from "@components/style/ItemContent.astro";
// 上一篇 下一篇
---

<section
  th:with="preNextArticle=${@articleCountSortTag.selectPreAndNextArticle(article.articleId,themeName)}"
>
  <ItemContent>
    <div class="grid grid-cols-2 gap-4 max-md:grid-cols-1 mb-2 rounded-lg h-48">
      <th:block th:each="pn,iterStat:${preNextArticle}">
        <div
          th:with="imgs=${@commonTag.split(pn.articleImg==null?'':pn.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}"
          class="rounded-lg shadow overflow-hidden group"
          th:classappend="${iterStat.index==0?'col-start-1 col-span-1':'col-start-2 col-span-1'}"
        >
          <img
            class="h-full w-full rounded-lg transition ease-in-out delay-150 group-hover:scale-110 duration-300"
            th:src="${(imgs==null)?iul+rando+'.jpg':(imgPrefix+imgs[0])}"
            th:alt="${pn.articleTitle}"
          />
          <div class="p-5 relative bottom-full">
            <a
              th:href="${webConfig['oly.web.domain']+'/article/'+pn.articleId}"
            >
              <h5
                class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white"
                th:text="${pn.articleTitle}"
              >
                Noteworthy technology acquisitions 2021
              </h5>
            </a>
            <p
              class="mb-3 font-normal text-gray-700 dark:text-gray-400"
              th:text="${pn.articleSummary}"
            >
              Here are the biggest enterprise technology acquisitions of 2021 so
              far, in reverse chronological order.
            </p>
            <a
              th:href="${webConfig['oly.web.domain']+'/article/'+pn.articleId}"
              th:classappend="${iterStat.index==0?'float-left':'float-right'}"
              class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
            >
              <svg
                th:if="${iterStat.index==0}"
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 12h14M5 12l4-4m-4 4 4 4"></path>
              </svg>
              阅读更多
              <svg
                th:unless="${iterStat.index==0}"
                class="w-6 h-6 text-gray-800 dark:text-white"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                fill="none"
                viewBox="0 0 24 24"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M19 12H5m14 0-4 4m4-4-4-4"></path>
              </svg>
            </a>
          </div>
        </div>
      </th:block>
    </div>
  </ItemContent>
</section>
